<template>
    <div class="tabs">
        <!-- 在下面这个v-for中,使用了tags传入了数据 -->
        <el-tag
            v-for="(item, index) in tags"
            :key="item.path"
            :closable="item.name !== 'home'"
            :effect="$route.name === item.name ? 'dark' : 'plain'" 
            @click="changeMenu(item)" 
            @close="handleClose(item, index)"
            size="small"
            >
            {{ item.label }}
        </el-tag>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
    name: 'CommonTag',
    
    data() {
        return {}
    },
    computed: {
        // 结构这个数据
        ...mapState({
            tags: state => state.tab.tabsList
        })
    },
    // mounted() {
    //     // this.$route这个读取的就是当前的路由配置,这个配置实在route中的,取得那个是看tab的
    //     console.log(this.$route, this.tags);
        
    // }

    methods:{
        // 使用结构服添加到页面中
        ...mapMutations(['closeTag']),
        // 点击tag跳转的功能
        changeMenu(item) {
            // console.log(item)
            // 在使用$rouret.push()在这个下面增加对应的路径进行跳转
            this.$router.push({ name: item.name})
        },
        // 点击tag删除对应的tag
        handleClose(item, index){
            // console.log(this.$route);
            // 调用store.tab中的mutations.closeTag
            this.closeTag(item)
            const length = this.tags.length

            // 删除之后的跳转逻辑
            // this.$route获取当前删除路径的一些值
            // console.log(this.$route);
            if (item.name !== this.$route.name) {
                return
            }
            // 表示删除的是最后一项
            if (index === length) {
                this.$router.push({
                    // 删除的最后一个,这个向前跳转
                    name: this.tags[index - 1].name
                })
            }else{
                this.$router.push({
                    // 删除的是中间的,这个向后跳转
                    name: this.tags[index].name
                })
            }
        }
    }
    
}
</script>
<style lang="less" scoped>
.tabs {
    padding: 20px;
    .el-tag {
        margin-right: 15px;
        
    }
}
</style>
